import{ref,reactive} from 'vue'
let v= ref<string>('')
let flag = false
let numArr = reactive<number[]>([1,2,3,4,5])
type Props = {
title:string
}

// tsx传参 ctx上下文使用这里面的方法传参
const renderDom =(props:Props,ctx:any)=>{
 return (
  <div>
    {/* tsx传参 */}
    <div>{props.title}</div>
    {/* 使用变量均用单花括号 无法自动解析ref 需要加。value使用 */}
    <input v-model={v.value} type="text" />
      <div>{v.value}</div>
      {/* tsx里面 v-show支持  v-if不支持 */}
      {/* <div v-if={flag}>雪天</div> */}
      { flag ? <div>景天</div>:<div>雪见</div> } {/* 使用js三元方式来实现v-if */}
      <div v-show={!flag}>景天</div>
      {
        // v-for使用for循环的形势来实现 v-bind直接用小括号写就行
        numArr.map((v,i,item)=>{
          // v-on 传参使用bind传参 直接（）传参会被调用 也不支持修饰符 
          return <div onClick={clickTap.bind(this,v,i,item,ctx)} data-index={1}>
            {v}
          </div>
        })
      }
  </div>
 )
}
const clickTap = (v:number,i:number,item:number[],ctx:any)=>{
// 第一个参数为外面接受的事件名，第二个为参数
  ctx.emit('on-click',v)
  item[i] = v+v
  console.log('点',v,i,item)
}
export default renderDom